<template>
	<view class="charts">
		<view class="title">
			<view class="title_line"></view>
			<text class="title_text">客户星级比例</text>
		</view>
		<view class="components">
			<l-echart ref="chartPie" />
		</view>
		<u-gap
			:height="getpx(40)"
			bgColor="transparent"
		></u-gap>
		<view
			class="flex_wrap row_middle row_between"
			style="width: 100%"
		>
			<view class="titleBox">
				<view class="title">
					<view class="title_line"></view>
					<text class="title_text">客户增加数量</text>
				</view>
				<next-bubble-menu
					:d-width="138"
					:dataList="filterDataList"
					bingEleId="popover1"
					relativeAllow="0"
					@change="itemChange"
				>
					<view
						id="popover1"
						class="filterBox"
					>
						{{ filterParams1.text }}
					</view>
				</next-bubble-menu>
			</view>
		</view>
		<view class="components">
			<l-echart ref="chartLine" />
		</view>
		<u-gap
			:height="getpx(40)"
			bgColor="transparent"
		></u-gap>
		<view class="title">
			<view class="title_line"></view>
			<text class="title_text">客户浏览商品Top3</text>
		</view>
		<view class="top3List">
			<view
				class="top3ListItem"
				v-for="item in top3List"
				:key="item.id"
			>
				<view style="width: 480rpx">
					<u-text
						:text="item.goodsName"
						lines="1"
						color="#0062ee"
						size="28rpx"
					/>
				</view>
				<text>{{ item.commodityCount }}次</text>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from "../components/lime-echart/static/echarts.min.js"
	import lEchart from "../components/lime-echart/components/l-echart/l-echart.vue"
	import { addCustomersInTheTimeFrame, analyzeCustomerManagementStars, getTopEntries } from "@/api/statistics"

	export default {
		components: {
			lEchart
		},
		data() {
			return {
				top3List: [],
				filterParams1: {
					text: "最近一年",
					value: 1,
					type: "year"
				},
				filterDataList: [
					{
						text: "最近一年",
						value: 1,
						type: "year"
					},
					{
						text: "最近90天",
						value: 90,
						type: "day"
					},
					{
						text: "最近30天",
						value: 30,
						type: "day"
					},
					{
						text: "最近7天",
						value: 7,
						type: "day"
					}
				],
				optionLine: {
					title: {
						// text: "{a|单位/人}  {b|最近一年}", // 使用富文本格式
						text: "单位/人", // 使用富文本格式
						textAlign: "left",
						top: "4%",
						left: "2%",
						textStyle: {
							width: uni.upx2px(644),
							color: "#86909C",
							fontSize: uni.upx2px(20)
							// rich: {
							//   a: {
							//     width: "50%",
							//     align: "left",
							//     color: "#86909C",
							//     fontSize: uni.upx2px(20),
							//     padding: [0, 0, 0, uni.upx2px(10)],
							//   },
							//   b: {
							//     width: "50%",
							//     align: "right",
							//     color: "#588BF3",
							//     fontSize: uni.upx2px(20),
							//     padding: [0, uni.upx2px(20), 0, 0],
							//   },
							// },
						}
					},
					tooltip: {
						show: true,
						trigger: "axis",
						position: "top"
					},
					formatter: "{b}：{c}人",
					xAxis: {
						data: [],
						type: "category",
						boundaryGap: false,
						axisTick: {
							show: false
						},
						axisLabel: {
							fontSize: uni.upx2px(14),
							color: "#86909C",
							rotate: 38
						}
					},
					yAxis: {
						type: "value",
						axisLabel: {
							fontSize: uni.upx2px(20),
							color: "#86909C"
						},
						// interval: 100,
						minInterval: 1,
						splitNumber: 3,
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed",
								color: "#E5E6EB"
							}
						}
					},
					grid: {
						top: "26%",
						left: "14%",
						right: "4%",
						bottom: "30%"
					},
					series: [
						{
							symbol: "none",
							data: [],
							type: "line",
							lineStyle: {
								color: "#165DFF"
							},
							areaStyle: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1, // 渐变方向
									[
										{
											offset: 0,
											color: "rgba(22, 93, 255, 0.20)"
										}, // 渐变起始色
										{
											offset: 1,
											color: "rgba(22, 93, 255, 0)"
										} // 渐变结束色，透明
									]
								)
							}
						}
					]
				},
				optionPie: {
					tooltip: {
						trigger: "item",
						textStyle: {
							fontSize: uni.upx2px(24)
						}
					},
					legend: {
						orient: "horizontal",
						top: uni.upx2px(64),
						right: uni.upx2px(20),
						width: uni.upx2px(300),
						textStyle: {
							fontSize: uni.upx2px(24)
						},
						itemWidth: uni.upx2px(28),
						itemHeight: uni.upx2px(16),
						itemGap: uni.upx2px(40)
					},
					series: [
						{
							type: "pie",
							left: uni.upx2px(40),
							top: uni.upx2px(23),
							width: uni.upx2px(250),
							height: uni.upx2px(250),
							radius: [0, "100%"],
							selectedMode: true,
							selectedOffset: uni.upx2px(10),
							data: [
								{
									value: 100,
									name: "0星客户"
								},
								{
									value: 100,
									name: "1星客户"
								},
								{
									value: 100,
									name: "2星客户"
								},
								{
									value: 100,
									name: "3星客户"
								},
								{
									value: 100,
									name: "4星客户"
								},
								{
									value: 100,
									name: "5星客户"
								}
							],
							label: {
								position: "inside",
								color: "#FFF",
								fontSize: uni.upx2px(20),
								formatter: "{d}%"
							}
						}
					]
				}
			}
		},
		onLoad() {
			getTopEntries().then((res) => {
				this.top3List = res.data
			})
		},
		computed: {
			getpx: () => {
				return (rpx) => uni.upx2px(rpx)
			}
		},
		mounted() {
			const that = this

			const params = {
				analyzeBegin: this.getDate(this.filterDataList[0].value, this.filterDataList[0].type).startDate,
				analyzeEnd: this.getDate(this.filterDataList[0].value, this.filterDataList[0].type).endDate,
				resultType: this.filterDataList[0].type === "year" ? "mouth" : "day"
			}

			const { startDate, endDate } = this.getDate(12, "months")

			that.getPieData().then(() => {
				that.$refs.chartPie.init(echarts, (chart) => {
					chart.setOption(that.optionPie)
				})
			})

			that.getLineData(params).then(() => {
				that.$refs.chartLine.init(echarts, (chart) => {
					chart.setOption(that.optionLine)
				})
			})
		},

		methods: {
			getDate(n, type) {
				// 获取当前日期
				const currentDate = this.$moment()

				// 计算n个月前的日期
				const twelveMonthsAgo = this.$moment(currentDate).subtract(n, type)

				// 获取12个月的开始时间（即12个月前的今天的00:00:00）
				const startDate = twelveMonthsAgo.startOf("day").format("YYYY-MM-DD HH:mm:ss")

				// 获取整整12个月的结束时间（即当前时间的23:59:59）
				const endDate = currentDate.endOf("day").format("YYYY-MM-DD HH:mm:ss")
				return {
					startDate,
					endDate
				}
			},
			// 获取饼图数据
			async getPieData() {
				const result = await analyzeCustomerManagementStars()
				this.optionPie.series[0].data = result.data.map((item) => {
					return {
						name: item.statisticalItem + "星客户",
						value: item.statisticalResult
					}
				})
			},
			itemChange(item) {
				const that = this
				console.log(item)
				this.filterParams1 = item
				const { startDate, endDate } = this.getDate(item.value, item.type)
				const params = {
					analyzeBegin: startDate,
					analyzeEnd: endDate,
					resultType: item.type === "year" ? "mouth" : "day"
				}
				console.log(params)
				that.getLineData(params).then(() => {
					that.$refs.chartLine.init(echarts, (chart) => {
						chart.setOption(that.optionLine)
					})
				})
			},
			// 获取折线图数据
			async getLineData(params) {
				const result = await addCustomersInTheTimeFrame(params)
				this.optionLine.series[0].data = result.data.map((item) => {
					return item.statisticalResult
				})
				this.optionLine.xAxis.data = result.data.map((item) => {
					return item.statisticalItem
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f6f9ff;
	}
</style>

<style lang="scss" scoped>
	.charts {
		padding: 40rpx;
		box-sizing: border-box;
		.titleBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: auto;
			.filterBox {
				width: 138rpx;
				height: 44rpx;
				background-color: #dbe7ff;
				font-size: 20rpx;
				line-height: 44rpx;
				color: #588bf3;
				border-radius: 4rpx;
				text-align: center;
			}
		}
		.title {
			display: flex;
			align-items: center;

			&_line {
				width: 8rpx;
				height: 28rpx;
				border-radius: 200rpx;
				background-color: #588bf3;
				margin-right: 20rpx;
			}

			&_text {
				font-weight: bold;
				color: #333;
				font-size: 28rpx;
			}
		}

		.components {
			width: 654rpx;
			height: 294rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 0 auto;
			margin-top: 24rpx;

			.canvas {
				width: 100%;
				height: 100%;
			}
		}
		.top3List {
			width: 100%;
			height: auto;
			background-color: #fff;
			border-radius: 24rpx;
			padding: 32rpx 40rpx;
			box-sizing: border-box;
			min-height: 232rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-top: 24rpx;

			.top3ListItem {
				width: 100%;
				height: auto;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				color: #0062ee;
			}
			.top3ListItem:nth-of-type(2) {
				opacity: 0.6;
			}
			.top3ListItem:nth-of-type(3) {
				opacity: 0.4;
			}
		}
	}
</style>
